<template>
  <div style="padding: 0 10px">
    <div class="fw-bold c-5e5e5e">{{ Q.xh }}、{{ Q["nr"] }}</div>
    <div class="mt-14" style="max-width: 800px" v-if="Q['pic'][0]">
      <img class="w100" v-lazy="Q['pic'][0]" />
    </div>
    <ul class="options c-5e5e5e">
      <li
        class="cursor-pointer mt-14"
        v-for="(item, index) in Q['_options']"
        :key="index"
        :class="{ success: item.status === 0, error: item.status === 1 }"
      >
        <button class="letter-button">{{ item.code }}</button>
        {{ item.title }}
      </li>
    </ul>
    <div class="choose-info mt-20 clearfix">
      <div class="float-right fz12 c-a5a5a5">
        <div class="inline-block cursor-pointer">
          <p v-if="Q['collect_zt'] === 1" @click="collect_Q(0)">
            <span class="icon fa fa-star mr-4 c-ff9800 fz14 align-0"></span
            >已收藏
          </p>
          <p v-else @click="collect_Q(1)">
            <span class="icon fa fa-star mr-4 fz14 align-0"></span>收藏
          </p>
        </div>
        <!--<p class="cursor-pointer inline-block Q-fix-wrong ml-22" >-->
        <!--<span class=" md  fz14" style="vertical-align: -2.5px;">highlight_off</span>-->
        <!--纠错-->
        <!--</p>-->
      </div>
    </div>
    <div class="p-panel p-border-2 mt-20 bg-fbfbfb explain">
      <div>
        <p class="inline-block c-success">
          <span class="md fz16 align-y-bottom mr-4">check</span>
          正确答案：{{ Q["da"] }}
        </p>
        <!-- 错误 -->
        <p
          v-if="Q['yx_da'].join('') !== Q['da']"
          class="inline-block c-error"
          style="margin-left: 60px"
        >
          <span class="md fz16 align-y-bottom mr-4">close</span>
          我的答案：{{ Q["yx_da"].join("") || "未答题" }}
        </p>
        <!-- 正确 -->
        <p v-else class="inline-block c-success" style="margin-left: 60px">
          <span class="md fz16 align-y-bottom mr-4">check</span>
          我的答案：{{ Q["yx_da"].join("") || "未答题" }}
        </p>
      </div>
      <div class="detail mt-24">
        <div class="float-left c-666" style="margin-left: -104px">
          <span class="md fz16 align-y-bottom mr-4">assignment</span>
          参考解析：
        </div>
        {{ Q["jx"] || "暂无" }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    Q: {
      type: Object,
      required: true,
    },
       request_id:{
        type:String
      }
  },
  data() {
    return {
      letter_json: window.$plus.letter_caps,
    };
  },
  methods: {
    collect_Q(zt) {
      const Q = this.Q;
      this.$api.paper
        .collect_Q({
          token: this.$store.state.$user.token,
          lb_id: this.$route.params.product_id,
          sj_id: Q.sj_id,
          st_id: Q.id,
          lx: "collect",
          zt,
          request_id:this.request_id
        })
        .then((rst) => {
          if (rst.data.event === "100") {
            Q["collect_zt"] = zt;
          } else {
            this.$Modal.info({ title: "提示", content: rst.data.msg });
          }
        });
    },
    init_options() {
      const _options = [];
      this.Q["options"].map((v, i) => {
        const v_code = this.letter_json[i];
        const A = this.Q.da_arr,
          A_has_v = A.includes(v_code);
        const my_A = this.Q.yx_da,
          my_A_has_v = my_A.includes(v_code);
        //判定
        let status; //0对 1错
        if ((A_has_v && !my_A_has_v) || (my_A_has_v && !A_has_v)) {
          status = 1;
        } else if (A_has_v) {
          status = 0;
        }
        _options.push({
          code: v_code,
          title: v,
          status: status,
        });
      });
      this.Q["_options"] = _options;
    },
  },
  created() {
    // console.log(this.Q,"this.Q")
    this.init_options();
  },
};
</script>

<style scoped lang="scss">
.options {
  li {
    &.success {
      color: #259b24;
      .letter-button {
        color: #fff;
        background-color: #259b24;
        border-color: transparent;
      }
    }
    &.error {
      color: #ff6060;
      .letter-button {
        color: #fff;
        background-color: #ff6060;
        border-color: transparent;
      }
    }
    .letter-button {
      margin-right: 16px;
      vertical-align: 0;
    }
  }
}

//修复错误
.Q-fix-wrong:hover {
  color: #0084b3;
}

//解析
.explain {
  padding: 20px;
  .detail {
    padding-left: 104px;
  }
}
</style>
